﻿<template>
     <el-upload ref="upload" :action="myAction" :headers="myHeaders" :data="data" :multiple="multiple" :name="name"
          :drag="drag" :dragger="dragger" :with-credentials="withCredentials" :show-file-list="showFileList"
          :accept="accept" :type="type" :on-remove="handlerRemove" :on-change="handlerChange"
          :on-preview="handlerPreview" :on-success="handlerSuccess" :on-progress="handlerProgress"
          :on-error="handlerError" :file-list="myFileList" :auto-upload="autoUpload" :list-type="listType"
          :http-request="httpRequest" :disabled="disabled">

          <el-button slot="trigger" size="small" type="primary">{{primaryKeyName}}</el-button>
          <el-button v-if="primaryUploadName" style="margin-left: 10px;" size="small" type="success"
               @click=" $refs.upload.submit()">
               {{primaryUploadName}}</el-button>
          <div slot="tip" class="el-upload__tip">{{uploadtip}}</div>
     </el-upload>
</template>

<script>

export default {
  components: {},
  data () {
    return {
      myFileList: []
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (newVal) {
        this.myFileList = newVal || []
      }
    },
    myFileList: {
      immediate: true,
      handler (newVal) {
        if (this.value != newVal) {
          this.$emit('input', newVal)
        }
      }
    }
  },
  computed: { // 请求header
    myHeaders () {
      let headers = this.headers || {}
      let token = this.$store.getters.token

      if (token) {
        headers['Authorization'] = `token ${token}`
      }

      return headers
    }
  },
  created () { },
  props: {
    primaryKeyName: {
      type: String,
      default: '选取文件'
    },
    primaryUploadName: {
      type: String,
      default: ''
    },
    uploadtip: String,
    myAction: {
      type: String,
      default: '#'
    },
    headers: {
      type: Object,
      default () {
        return {}
      }
    },
    data: Object,
    multiple: {
      type: Boolean,
      default: true
    },
    name: {
      type: String,
      default: 'file'
    },
    drag: Boolean,
    dragger: Boolean,
    withCredentials: {
      type: Boolean,
      default: false
    },
    showFileList: {
      type: Boolean,
      default: true
    },
    accept: String,
    type: {
      type: String,
      default: 'select'
    },
    beforeUpload: Function,
    beforeRemove: Function,
    fileList: {
      type: Array,
      default () {
        return []
      }
    },
    autoUpload: {
      type: Boolean,
      default: false
    },
    listType: {
      type: String,
      default: 'text' // text,picture,picture-card
    },
    disabled: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 10
    }
  },
  methods: {
    // 文件列表移除文件时的钩子
    handlerRemove (file, fileList) {
      console.log('移除文件事件', file, fileList)
    },
    // 下载文件
    downloadDocument (file) { console.log(file) },
    // 点击文件列表中已上传的文件时的钩子
    handlerPreview (file) {
      (this.onPreview || function () { })(file)

      this.downloadDocument(file)
    },
    // 自定义上传
    httpRequest (param) {
      var fileObj = param.file
      var form = new FormData()
      // 文件对象
      form.append('file', fileObj)

      this.$Ajax('/api/common/upload', 'post', form, (res) => {
        if (res.Code == 200) {
          param.onSuccess(res)
        } else {
          this.$notify({
            title: '警告',
            message: res.Message,
            type: 'warning'
          })
        }
      })
    },
    // 文件上传成功时的钩子
    handlerSuccess (response, file, fileList) {
      if (!this.myFileList) { this.myFileList = [] }
      this.myFileList.push({
        name: file.name,
        url: response.Data
      })
    },
    // 文件上传失败时的钩子
    handlerError (err, file, fileList) {
      // 从未上传列表中删除文件
      console.log(err)
      this.$notify.error({
        title: '错误',
        message: '文件上传失败，' + err.message
      })
    },
    // 文件上传时的钩子
    handlerProgress (event, file, fileList) {
      // console.log(arguments, 2);
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handlerChange (file, fileList) {
      // console.log(arguments,);
    }

  }
}

</script>

<style>
     .upload-disabled .el-upload {
          display: none;
     }
</style>
